Kleuren in CSS

In CSS kun je op verschillende manieren kleur geven aan tekst. Hieronder worden er vier manier besproken.

Kleurnaam

Met maar 147 kleurnamen heb je niet veel keuze. Bovendien moet je de namen onthouden. Niet heel handig dus.

Voorbeelden:

• color: red
• color: darkgreen
• color: mediumaquamarine

Hexadecimale code

Dit zijn zescijferige codes die de hoeveelheid rood, groen, en blauw (RGB) in een kleur vertegenwoordigen, voorafgegaan door een hekje (#).

Voorbeelden (herken je het patroon?):

• color: #ff0000; [rood]
• color: #00ff00; [groen]
• color: #0000ff; [blauw]
• color: #000000; [zwart]
• color: #ffffff; [wit]

RGB-waarde

Lijkt op de hexadecimale codes hierboven, alleen gebruik je nu decimale getallen die van 0 tot 255 lopen.

Voorbeelden (vul de kleuren in: ):

• color: rgb(255, 0, 0); [zet hier de kleur]
• color: rgb(0, 255, 0); [zet hier de kleur]
• color: rgb(150, 0, 255); [zet hier de kleur]
• color: rgb(100, 100, 100); [zet hier de kleur]

Hue, saturation, luminosity (HSL)

Een laatste manier om kleur aan te geven is via HSL-waarden. Lees meer over deze manier op de websites van W3Schools en The New Code.

Voorbeelden:

• color: hsl(0, 100%, 51%) [zet hier de kleur]
• color: hsl(212, 100%, 50%) [zet hier de kleur]
• color: hsl(212, 0%, 100%) [zet hier de kleur]
• color: hsl(212, 0%, 0%) [zet hier de kleur]